import React, { Component } from 'react'
import './ShoppingCart.css'

export default class ShoppingCart extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }
    _reduce = item => {
        item.count -= 1
        item.total = Number.parseInt(item.price) * Number.parseInt(item.count)
        this.setState({ item })
    }
    _plus = item => {
        item.count += 1
        item.total = Number.parseInt(item.price) * Number.parseInt(item.count)
        this.setState({ item })
    }
    _deleteItem = item => {
        this.props.deleteItem(item)
    }
    render() {
        return (
            <div>
                <div id="Margin">
                    <div id="Topbar">购物车</div>
                    <div id="main">
                        <div id="hotelinformation">
                            {this.props.cart.map(item => {
                                return <li>
                                    <div>
                                        <div id='hotelname'>{item.name}</div>
                                        <div>
                                            <input type="button" value='✘' onClick={() => this._deleteItem(item)} />
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <input type="button" value='－' onClick={() => this._reduce(item)} />
                                            <input id="txt" type="text" value={item.count} />
                                            <input type="button" value='＋' onClick={() => this._plus(item)} />
                                        </div>
                                        <div>{item.total}</div>
                                    </div>
                                </li>
                            })}

                        </div>
                    </div>
                    <div id="total">
                        <li>
                            <span id="sub">数量：{<span>{this.props.cart.length}个</span>}</span>
                        </li>

                        <li>
                            <span id="sub">小计：{<span>{this.props.cart.reduce((prev, item) => { return prev + item.total }, 0)}元</span>}</span>

                        </li>
                        <li>
                            <span id="sub">平台服务费：{<span>99.0元</span>}</span>

                        </li>
                        <li>
                            <span id="sub">合计：{<span>{this.props.cart.reduce((prev, item) => { return prev + item.total }, 0) + 99}元</span>}</span>
                        </li>
                    </div>

                    <div id="check">
                        <input id="checkbutton" type="button" value='结算' />
                    </div>
                    
                </div>
            </div>
        )
    }
}
